<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zTree</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
<!--    <link rel="stylesheet" href="/static/layui_exts/ztree/metroStyle.css">-->
</head>
<body>
<div class="layui-card">
    <div class="layui-card-header">编辑访问权限</div>
    <div class="layui-card-body">
        <form class="layui-form form-horizontal" action="" method="post">
            <div class="zTreeDemoBackground left">
                <ul class="ztree" style="margin-left: 5px;margin-top:5px; padding: 0;">
                    <li><a title="全部展开、折叠 "><span class="button ico_open"></span><span id="ztree_expandAll" data-open="false">全部展开、折叠 </span></a> </li>
                </ul>
                <ul id="treeDemo" class="ztree"></ul>
            </div>
            <input type="hidden" name="rules" value="" />
            <input type="hidden" name="id" value="{$roleInfo.id}" />
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn ajax-post" lay-submit="" lay-filter="*" target-form="form-horizontal">立即提交</button>
                    <button class="layui-btn layui-btn-normal" type="button" onclick="javascript:history.back(-1);">返回</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript" src="/static/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/static/layui/layui.js"></script>
<script>
    layui.config({
        version: '1557143998899',
        base: '/static/layui_exts/'
    }).extend({
        ztree: 'ztree/ztree',
    });

    layui.use(['jquery', 'form', 'ztree'], function() {
        var $ = layui.jquery,
            form = layui.form,
            ztree = layui.ztree;

        //配置
        var setting = {
            //设置 zTree 的节点上是否显示 checkbox / radio
            check: {
                enable: true,
                chkboxType: { "Y": "ps", "N": "ps" }
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "nid",
                    pIdKey: "parentid"
                }
            },
            callback: {
                beforeClick: function(treeId, treeNode) {
                    if (treeNode.isParent) {
                        zTree.expandNode(treeNode);
                        return false;
                    } else {
                        return true;
                    }
                },
                onClick: function(event, treeId, treeNode) {
                    //栏目ID
                    var catid = treeNode.catid;
                    //保存当前点击的栏目ID
                    setCookie('tree_catid', catid, 1);
                }
            }
        };
        //节点数据
        var zNodes = {$json|raw};

        //zTree对象
        var zTree = null;
        $(document).ready(function() {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.expandAll(true);
            $("#ztree_expandAll").click(function() {
                if ($(this).data("open")) {
                    zTree.expandAll(false);
                    $(this).data("open", false);
                } else {
                    zTree.expandAll(true);
                    $(this).data("open", true);
                }
            });
        });
    });
</script>
</body>
</html>